<template>
  <k-view class="stock-score-comparison">
    <DistributionHistogram
      v-if="showDistribution"
      :originData="distributionData"
      :showTooltip="true"
      :tooltip="tipData"
      :themeType="themeType"
      :activeIndex="activeIndex"
    ></DistributionHistogram>
    <k-view class="rank-list-view">
      <k-view v-for="(item, index) in cardList" :key="index">
        <rank-card :cardInfo="item"></rank-card>
      </k-view>
    </k-view>
  </k-view>
</template>

<script>
import Apis from '@king-fisher/apis';
import RankCard from '@/components/StockDiagnosis/rankCard.vue';
import { getCompareDistribution, getIndustryCompare } from '@/apis';
import {
  formatChgString,
  formatChgStringColor,
  previousPeriod,
  formatChgStringScore,
} from '@/utils';

export default {
  props: {
    stockInfo: {
      type: Object,
      default: () => {
        return {
          name: '--',
          code: '--',
          score: '',
          price: '--',
          rise: '--',
        };
      },
    },
    themeType: {
      type: String,
      default: '',
    },
  },
  components: { RankCard },
  data() {
    return {
      cardList: [],
      showDistribution: false,
      distributionData: [],
      activeIndex: 0,
    };
  },
  methods: {
    getData() {
      this.getCompareDistributionInfo();
      this.getIndustryCompareInfo();
    },
    createRankData(info) {
      const listData = [];
      listData.push({
        title: info.industry_name,
        info: formatChgString(info.industry_score_avg, 2),
        subInfo: {
          name: previousPeriod,
          score: formatChgStringScore(info.industry_score_avg_inc, 2),
          color: formatChgStringColor(info.industry_score_avg_inc),
        },
      });
      listData.push({
        title: '行业内排名',
        info: `${formatChgString(info.stock_rank)}/${formatChgString(info.stock_num)}`,
        subInfo: {
          name: previousPeriod,
          score: formatChgStringScore(info.stock_rank_inc),
          color: formatChgStringColor(info.stock_rank_inc),
        },
      });
      listData.push({
        title: '评分中位数',
        info: formatChgString(info.industry_score_mid, 2),
        subInfo: {
          name: previousPeriod,
          score: formatChgStringScore(info.industry_score_mid_inc, 2),
          color: formatChgStringColor(info.industry_score_mid_inc),
        },
      });
      return listData;
    },
    async getIndustryCompareInfo() {
      const res = await getIndustryCompare(this.stockInfo.code);
      if (res.status_code !== 0) {
        Apis.Toast.show('暂未查询到相关信息');
        return;
      }
      this.cardList = this.createRankData(res.data);
    },
    async getCompareDistributionInfo() {
      this.showDistribution = false;
      const res = await getCompareDistribution(this.stockInfo.code);
      if (res.status_code !== 0) {
        Apis.Toast.show('暂未查询到相关信息');
        return;
      }
      const barData = this.createDistributionChartData(res.data.list);
      const activeIndex = this.findActiveIndex(res.data.list);
      this.distributionData = barData;
      this.activeIndex = activeIndex;
      this.showDistribution = true;
    },
    createDistributionChartData(info) {
      const chartData = [];
      if (info && info.length > 0) {
        info.forEach(item => {
          chartData.push({
            value: Number(item.num) ? item.num : 0,
            label: `${item.lower}-${item.upper}`,
          });
        });
      }
      return chartData;
    },
    findActiveIndex(info) {
      let activeIndex = 0;
      info.map((item, index) => {
        if (this.stockInfo.score >= item.lower && this.stockInfo.score <= item.upper) {
          activeIndex = index;
        }
      });
      return activeIndex;
    },
  },
  mounted() {
    if (this.stockInfo.code) {
      this.getData();
    }
  },
  computed: {
    tipData() {
      if (this.stockInfo.name) {
        return this.stockInfo.name + '在这里';
      } else {
        return '该公司在这里';
      }
    },
  },
};
</script>

<style lang="less">
.stock-score-comparison {
  padding-top: 88px;
  .rank-list-view {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
  }
}
.tooltip-rectangle {
  white-space: nowrap !important;
}
</style>
